<template>
  <div class="chart-container" ref="chart"></div>
</template>  
  
<script>
// 引入 ECharts 主模块  
import * as echarts from 'echarts';

export default {
  name: 'FishPondYieldChart',
  data () {
    return {
      chartInstance: null, // 用于存储 ECharts 实例  
    };
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例  
    this.chartInstance = echarts.init(this.$refs.chart);
    // 绘制图表  
    this.chartInstance.setOption(this.getOption());
  },
  beforeDestroy () {
    if (this.chartInstance) {
      this.chartInstance.dispose(); // 在组件销毁前，清除图表  
    }
  },
  methods: {
    getOption () {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 100,
          left: 50,
          right: 50
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 50,
            end: 100
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        legend: {
          data: ['亩产', '总产']
        },
        xAxis: {
          data: ['鱼塘1', '鱼塘2', '鱼塘3', '鱼塘4', '鱼塘5', '鱼塘6', '鱼塘7', '鱼塘8', '鱼塘9', '鱼塘10']
        },
        yAxis: {},
        series: [
          {
            name: '亩产',
            type: 'line',
            data: [500, 600, 400, 700, 550, 500, 600, 400, 700, 550]
          },
          {
            name: '总产',
            type: 'line',
            data: [3000, 3600, 2400, 4200, 3300, 3000, 3600, 2400, 4200, 3300]
          }
        ]
      };
    }
  }
};  
</script>  
  
<style lang="scss" scoped>  .chart-container {
    width: 100%;
    height: 400px;
  }
</style>